<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>计数器：{{count}}</h1>
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    *
    * 我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：
    * v-on:click="handler" 或 @click="handler"。
        事件处理器 (handler) 的值可以是：
        内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
        方法事件处理器：一个指向组件上定义的方法的属性名或是路径
    * */
    const app=Vue.createApp({
        data(){
            return{
                count:0,
            }
        },
        methods:{
            add:function (){
                console.log(this)
                this.count++
            },
            sub:function () {
                console.log(this)
                this.count--
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
